<template>
  <view class="container">
    <view class="tabs">
      <view class="tab" :class="activeType==='1' ? 'tab-active' : ''" @click="switchTab('1')">学习目标</view>
      <view class="tab" :class="activeType==='2' ? 'tab-active' : ''" @click="switchTab('2')">运动目标</view>
      <view class="tab" :class="activeType==='3' ? 'tab-active' : ''" @click="switchTab('3')">计划目标</view>
    </view>
    
    <Card class="search-card">
      <view class="search-wrapper">
        <input 
          class="search-input-plain" 
          type="text" 
          placeholder="搜索目标" 
          v-model="searchKeyword"
          confirm-type="search"
          @confirm="doSearch"
        />
        <view class="search-action" @click="doSearch">搜索</view>
      </view>
    </Card>
    
    <view class="goals-list">
      <Card v-for="(goal, index) in filteredGoals" :key="goal.id || index" class="goal-card" clickable @click="goToGoalDetail(goal)">
        <view class="goal-header">
          <text class="goal-title">{{ goal.title }}</text>
          <view class="goal-status" :class="goal.statusClass">{{ goal.status }}</view>
        </view>
        <view class="goal-content">
          <view class="goal-info">
            <text class="info-label">时间范围：</text>
            <text class="info-value">{{ goal.startTime }} - {{ goal.deadline }}</text>
          </view>
          <view class="goal-info">
            <text class="info-label">目标描述：</text>
            <text class="info-value">{{ goal.description || '-' }}</text>
          </view>
        </view>
      </Card>
    </view>
    
    <view class="action-buttons">
      <Button class="action-btn" type="primary" :text="createBtnText" @click="goToCreate" />
    </view>
  </view>
</template>

<script>
import { services } from '../../api/index.js';
const goalAPI = services.goal;

export default {
  data() {
    return {
      activeType: '1',
      searchKeyword: '',
      goals: []
    };
  },
  async onLoad() {
    await this.fetchGoals();
  },
  
  computed: {
    filteredGoals() {
      if (!this.searchKeyword) {
        return this.goals;
      }
      
      return this.goals.filter(goal => 
        (goal.title && goal.title.includes(this.searchKeyword)) || 
        (goal.description && goal.description.includes(this.searchKeyword))
      );
    },
    createBtnText() {
      if (this.activeType === '1') return '创建学习目标';
      if (this.activeType === '3') return '创建计划目标';
      return '创建运动目标';
    }
  },
  
  methods: {
    doSearch() {
      // 当前过滤为前端过滤，如需后端搜索可在此调用接口传 keyword
      // 为了更好的体验，这里无需额外逻辑，输入双向绑定后 computed 会自动生效
    },
    async switchTab(type) {
      this.activeType = type;
      await this.fetchGoals();
    },
    async fetchGoals() {
      try {
        uni.showLoading({ title: '加载中...' });
        const resp = await goalAPI.getGoalsList({ goalType: this.activeType });
        const data = resp?.data || resp || {};
        const rows = Array.isArray(data.rows) ? data.rows : [];
        const mapStatus = s => s === 'PENDING' ? '未开始' : (s === 'IN_PROGRESS' ? '进行中' : '已完成');
        const mapClass = s => s === 'PENDING' ? 'status-pending' : (s === 'IN_PROGRESS' ? 'status-progress' : 'status-completed');
        this.goals = rows.map(item => ({
          id: item.id,
          title: item.title,
          description: item.description || '',
          startTime: item.startTime || '',
          deadline: item.deadline || '',
          status: mapStatus(item.status),
          statusClass: mapClass(item.status)
        }));
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },
    
    goToCreate() {
      if (this.activeType === '1') {
        uni.navigateTo({ url: '/pages/goal/create-learning' });
      } else if (this.activeType === '3') {
        uni.navigateTo({ url: '/pages/plan/create' });
      } else {
        uni.navigateTo({ url: '/pages/goal/create-life' });
      }
    },
    
    goToGoalDetail(goal) {
      if (this.activeType === '1') {
        uni.navigateTo({ url: '/pages/goal/learning-detail?id=' + goal.id });
      } else if (this.activeType === '3') {
        uni.navigateTo({ url: '/pages/plan/detail?id=' + goal.id });
      } else {
        uni.navigateTo({ url: '/pages/goal/life-detail?id=' + goal.id });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.tabs {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-base;
  background-color: $card-background;
  border-radius: $border-radius-base;
  overflow: hidden;
}

.tab {
  flex: 1;
  text-align: center;
  padding: $spacing-base 0;
  font-size: $font-size-base;
  color: $text-secondary;
  
  &:not(:last-child) {
    border-right: 1rpx solid $text-tertiary; // 所有非最后一个tab添加右分隔线
  }
}

.tab-active {
  color: $primary-color;
  font-weight: bold;
  background-color: rgba($primary-color, 0.05);
}

.search-card {
  margin-bottom: $spacing-base;
}

.search-wrapper { position: relative; }
.search-input-plain {
  width: 100%; height: 70rpx; line-height: 70rpx; padding: 0 120rpx 0 80rpx;
  border: 1rpx solid $text-tertiary; border-radius: 9999rpx; font-size: $font-size-sm; box-sizing: border-box;
}
.search-input-plain::placeholder { color: $text-tertiary; }
.search-action {
  position: absolute; right: 8rpx; top: 50%; transform: translateY(-50%);
  background-color: $primary-color; color: #fff; border-radius: 9999rpx; padding: 0 28rpx; height: 56rpx; line-height: 56rpx; font-size: $font-size-sm;
}

.goals-list {
  margin-bottom: 120rpx;
}

.goal-card {
  margin-bottom: $spacing-sm;
}

.goal-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.goal-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.goal-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.status-completed {
  background-color: rgba($secondary-color, 0.1);
  color: $secondary-color;
}

.status-paused {
  background-color: rgba($text-tertiary, 0.1);
  color: $text-tertiary;
}

.goal-content {
  font-size: $font-size-sm;
}

.goal-info {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-xs;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  color: $text-secondary;
  width: 160rpx;
}

.info-value {
  flex: 1;
  color: $text-primary;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
}

.action-btn {
  width: inherit;
  margin-top: $spacing-xl;
}
</style>